<template>
<transition  name="fade">
  <div v-if="show">
      看我
  </div>
  </transition>
  <button @click="a">按钮</button>
</template>

<script>
import { ref } from 'vue-demi'
export default {
  setup () {
    const show = ref(true)
    const a = () => {
      show.value = !show.value
    }
    return {
      show, a
    }
  }

}
</script>

<style>
.div {
    background-color: red;
    width: 100px;
    height: 100ex;
}
.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opacity: 0
}
.fade-enter {
    opacity: 1
}
.fade-enter-active {
    transition: all 1s;
}
.fade-enter-to {
    opacity: 0
}

</style>
